<template>
    <div class="message-container">
      <div class="filter-bar">
        <div class="filter-input">
          <span class="label">消息名称：</span>
          <input type="text" placeholder="请输入" />
        </div>
        <div class="filter-input">
          <span class="label">状态：</span>
          <select>
            <option value="">查询</option>
            <option value="read">已读</option>
            <option value="unread">未读</option>
          </select>
        </div>
      </div>
  
      <div class="summary-bar">
        <span class="selected-count">已选择 2 项</span>
        <span class="query-time">本次查询耗时：345毫秒</span>
        <button class="clear-btn">清空</button>
      </div>
  
      <table class="message-table">
        <thead>
          <tr>
            <th width="50px">序号</th>
            <th>主题</th>
            <th width="150px">接收时间</th>
            <th width="100px">状态</th>
            <th width="80px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(message, index) in messages" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ message.subject }}</td>
            <td>{{ message.receiveTime }}</td>
            <td>
              <span :class="['status', message.status === '已读' ? 'read' : 'unread']">
                {{ message.status }}
              </span>
            </td>
            <td>
              <button class="delete-btn" @click="deleteMessage(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
          <!-- 分页组件 -->
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        messages: [
          {
            subject: "李通发送一个新的考试路径由您处理",
            receiveTime: "2023-05-11 09:22",
            status: "已读"
          },
          {
            subject: "李通发送一个新的考试路径由您处理",
            receiveTime: "2023-05-11 09:22",
            status: "未读"
          },
          {
            subject: "李通发送一个新的考试路径由您处理",
            receiveTime: "2023-05-11 09:22",
            status: "已读"
          }
        ],
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 100
        }
      };
    },
    methods: {
      deleteMessage(index) {
        this.messages.splice(index, 1);
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.fetchData()
      },
    }
  };
  </script>
  
  <style scoped>
  .message-container {
    font-family: Arial, sans-serif;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .filter-bar {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
  }
  
  .filter-input {
    margin-right: 20px;
    display: flex;
    align-items: center;
  }
  
  .filter-input .label {
    margin-right: 5px;
    font-size: 14px;
  }
  
  .filter-input input,
  .filter-input select {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 30px;
  }
  
  .summary-bar {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
  }
  
  .selected-count {
    margin-right: 20px;
  }
  
  .query-time {
    margin-right: 20px;
  }
  
  .clear-btn {
    background: none;
    border: none;
    color: #1890ff;
    cursor: pointer;
    padding: 0;
  }
  
  .clear-btn:hover {
    color: #40a9ff;
  }
  
  .message-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .message-table th,
  .message-table td {
    border: 1px solid #e8e8e8;
    padding: 12px 15px;
    text-align: left;
  }
  
  .message-table th {
    background-color: #fafafa;
    font-weight: 500;
  }
  
  .message-table tr:hover {
    background-color: #f5f5f5;
  }
  
  .status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
  }
  
  .status.read {
    background-color: #f0f0f0;
    color: #666;
  }
  
  .status.unread {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  .delete-btn {
    background: none;
    border: none;
    color: #ff4d4f;
    cursor: pointer;
    padding: 0;
  }
  
  .delete-btn:hover {
    color: #ff7875;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>